<%--
  Created by IntelliJ IDEA.
  User: cheng
  Date: 2023/6/20
  Time: 13:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags
    -->
    <title>FinishedProductInfo</title>

    <!-- Common plugins -->
    <link href="${pageContext.request.contextPath}../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/pace.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/metismenu.min.css" rel="stylesheet">
    <!-- dataTables -->
    <link href="${pageContext.request.contextPath}../../static/css/jquery.datatables.min.css" rel="stylesheet"
          type="text/css">
    <link href="${pageContext.request.contextPath}../../static/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <!--template css-->
    <link href="${pageContext.request.contextPath}../../static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jquery-ui.css" rel="stylesheet">
    <script src="../../static/js/html5shiv.min.js"></script>
    <script src="../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    #dialog-form .ui-button-text:nth-child(1) {
        background-color: green !important;
    }

    /* 不通过按钮样式 */
    #dialog-form .ui-button-text:nth-child(2) {
        background-color: red !important;
    }
</style>
<body>

<%--弹窗--%>
<div id="dialog-form" style="overflow: hidden" title="盘点库存">
    <form id="login-form">
        <fieldset>
            <%--预计库存:<input type="text" name="expected" id="expected" class="text ui-widget-content ui-corner-all" />--%>
            实际库存:<input type="text" name="finishedProductActual" id="finishedProductActual" value="" class="text
        ui-widget-content ui-corner-all"/>
        </fieldset>
    </form>
</div>

<div id="dialog-was" style="display:none" title="盘盈原因">
    <fieldset>
        请输入盘盈原因:<input type="text" name="cause" id="cause" value="" class="text ui-widget-content ui-corner-all"/>
    </fieldset>
</div>

<div id="dialog-was2" style="display:none" title="盘盈原因">
    <fieldset>
        请输入盘亏原因:<input type="text" name="cause2" id="cause2" value="" class="text ui-widget-content ui-corner-all"/>
    </fieldset>
</div>


<section class="main-content" style="margin-left: 0px; padding: 0;width: 1210px;height: 702px">


    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Data Tables</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                    <li>tables</li>
                    <li>data tables</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default collapsed">
                <div class="panel-heading">
                    Responsive Data tables.0
                </div>


                <div class="panel-body">
                    <table class="table table-striped dt-responsive nowrap" id="datatable">
                        <thead>
                        <table id="datatable1" class="table table-striped dt-responsive nowrap table-hover">
                            <thead>
                            <tr id="t1">
                                <%--<th style="width:100px">--%>
                                <%--<strong>id</strong>--%>
                                <%--</th>--%>
                                <%--<th style="width:100px">--%>
                                <%--<strong>编号</strong>--%>
                                <%--</th>--%>
                                <th style="width:130px">
                                    <strong>批次</strong>
                                </th>
                                <th style="width:300px">
                                    <strong>名称</strong>
                                </th>
                                <th style="width:250px">
                                    <strong>入库时间</strong>
                                </th>
                                <th style="width:200px" idaaa="productQuantity">
                                    <strong>仓库id</strong>
                                </th>
                                <th style="width:300px">
                                    <strong>出库时间</strong>
                                </th>
                                <th style="width:140px">
                                    <strong>数量</strong>
                                </th>
                                <th style="width:560px">
                                    <strong>描述</strong>
                                </th>
                                <th style="width:200px">
                                    <strong>实际库存</strong>
                                </th>
                                <%--<th style="width:300px">--%>
                                <%--<strong>原因</strong>--%>
                                <%--</th>--%>
                                <th style="width:100px">
                                    <strong>操作</strong>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


</section>

<script src="${pageContext.request.contextPath}../../static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/pace.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jasny-bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.nanoscroller.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/metismenu.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/float-custom.js"></script>
<!-- Datatables-->
<script src="${pageContext.request.contextPath}../../static/js/jquery.datatables.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/datatables.responsive.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.ui.custom.js"></script>
<script>

    let dataTable = $('#datatable1').DataTable({
        // 设置列定义
        columns: [
            // {data: 'finishedProductId'},
            // {data: 'finishedProductCode'},
            {data: 'batchNumber'},
            {data: 'finishedProductName'},
            {data: 'warehouseEntryTime'},
            {data: 'warehouseId'},
            {data: 'deliveryTime'},
            {data: 'finishedProductNum'},
            {data: 'finishedProductDetail'},
            {data: 'finishedProductActual'}
            // {data: 'cause'}
        ]
    });


    //生成批次号
    // function generateRandomString(length) {
    // let result = '';
    // const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    // const charactersLength = characters.length;
    // for (let i = 0; i < length; i++) {
    // result += characters.charAt(Math.floor(Math.random() * charactersLength));
    // }
    // return result;
    // }
    // const randomString = generateRandomString(2); // 生成长度为10的随机字符串
    // console.log(randomString);
    // let randomNumber = Math.floor(Math.random() * 1000000);
    // console.log(randomNumber);
    // let random = randomString + randomNumber;
    // console.log(random);
    //
    // // 创建包含随机数的对象
    // let data = {
    // random: random
    // };
    //
    // // 使用AJAX发送POST请求到后端
    // $.ajax({
    // url: 'finished/updateBatch', // 替换为你的后端URL
    // method: 'POST',
    // data: data,
    // success: function(response) {
    // console.log('随机数已插入到数据库！');
    // },
    // error: function(error) {
    // console.error('插入随机数到数据库时发生错误：', error);
    // }
    // });

    getFinishedProductInfo();   //列表渲染
    function getFinishedProductInfo() {
        $.ajax({
            "url": "finished/getFinishedProductInfo", // 要提交的URL路径
            "type": "get", // 发送请求的方式
            "data": {}, // 要发送到服务器的数据
            "dataType": "json", // 期望接受的数据格式
            "success": function (result) { // 请求成功后要执行的代码
                let finishedProduct = "";
                // console.log(result);
                for (let index in result) {
                    // console.log(result);
                    finishedProduct += `<tr>
        <%--<td>${result[index].finishedProductId}</td>--%>
        <%--<td>${result[index].finishedProductCode}</td>--%>
        <td>${result[index].batchNumber}</td>
        <td>${result[index].finishedProductName}</td>
        <td>${result[index].warehouseEntryTime}</td>
        <td>${result[index].warehouseId}</td>
        <td>${result[index].deliveryTime}</td>
        <td>${result[index].finishedProductNum}</td>
        <td>${result[index].finishedProductDetail}</td>
        <td><input type="text" id="Actual" value="${result[index].finishedProductActual}" /></td>
        <td>
        <button onclick="check(${result[index].batchNumber},${result[index].finishedProductNum}
        ,${result[index].finishedProductActual})"
        style="background-color:rgb(88,180,224);color:white" class="btn btn-default" id="dialog-form-opener"
        type="button">
        盘点
        </button>
        </td>
        </tr>
        `
                }
                $('#t1').after(finishedProduct);
                //oninput事件

                //input 失焦事件
                $('input[id^="Actual"]').blur(function () {
                    // 获取行的索引
                    let index = $(this).closest('tr').index();
                    // 获取batchNumber的值
                    let batchNumber = result[index - 1].batchNumber;
                    // 获取更新后的输入框值
                    let finishedProductActual = $(this).val();
                    <%--alert(`Batch Number: ${batchNumber}, Updated Value: ${"新的值:" +finishedProductActual}`);--%>

                    updateActual();  //根据批次号更新实际库存
                    function updateActual() {
                        $.ajax({
                            "url": "finished/updateActual", // 要提交的URL路径
                            "type": "get", // 发送请求的方式
                            "data": {
                                batchNumber: batchNumber,
                                finishedProductActual: finishedProductActual
                            }, // 要发送到服务器的数据，需要将对象转换为JSON字符串
                            "dataType": "text", // 期望接受的数据格式
                            // "contentType": "application/json;charset=utf-8",
                            "success": function (result) { // 请求成功后要执行的代码
                                if (result == "success") {
                                    // // alert("实际库存修改成功");
                                    $("#t1~tr").remove();
                                    getFinishedProductInfo();
                                } else {
                                    // alert("实际库存修改失败");
                                }
                            },
                            "error": function () {
                                alert("updateActual响应时间过长！请重新加载");
                            }
                        });
                    }
                });
            },
            "error": function () {
                alert("失焦响应时间过长！请重新加载")
            }
        });
    }


    function check(batchNumber, finishedProductNum, finishedProductActual) {
        //鼠标mousedown事件
        // $("#Actual").mousedown(function(event) {
        // // Your event handling code here
        // // event.preventDefault();
        // let actual = $(this).val();
        // console.log("actual:"+actual);
        // });
        // 判断实际库存和成品数量是否一致
        // console.log("batchNumber:" +batchNumber);
        // console.log("finishedProductActual:"+finishedProductActual);
        // console.log("finishedProductNum:"+finishedProductNum);
        if (finishedProductActual == finishedProductNum) {
            // 实际库存和成品数量相等的情况下执行的操作
            alert("该批次实际库存和成品数量相等,无需操作!");
        } else if (finishedProductActual > finishedProductNum) {
            alert("该批次盘盈,请说明原因");
            $('#dialog-was').dialog({
                autoOpen: false,
                modal: true,
                width: 400,
                buttons: {
                    提交: function () {
                        alert("提交了");
                        let input = $('input[id="cause"]').val();
                        let count = finishedProductActual - finishedProductNum;
                        let cause = "盘盈" + count + " 原因: " + input;


                        if (true) {      //提交上层审核 过了把数量修改为实际库存的数量
                            updateCause();

                            function updateCause() {
                                $.ajax({
                                    "url": "finished/updateCause", // 要提交的URL路径
                                    "type": "get", // 发送请求的方式
                                    "data": {
                                        batchNumber: batchNumber,
                                        finishedProductActual: finishedProductActual,
                                        cause: cause
                                    }, // 要发送到服务器的数据，需要将对象转换为JSON字符串
                                    "dataType": "text", // 期望接受的数据格式
                                    // "contentType": "application/json;charset=utf-8",
                                    "success": function (result) { // 请求成功后要执行的代码
                                        if (result == "success") {
                                            // // alert("盘点完成");
                                            $("#t1~tr").remove();
                                            getFinishedProductInfo();

                                        } else {        //   上层审核不过不做修改 只把原因更新到数据库
                                            // alert("盘点未通过");
                                        }
                                    },
                                    "error": function () {
                                        alert("盘点响应时间过长！请重新加载");
                                    }
                                });
                            }
                        }
                        $(this).dialog('close');
                    },
                    返回: function () {
                        $(this).dialog('close');
                    }
                }
            });
            $('#dialog-was').dialog('open');
        } else if (finishedProductActual < finishedProductNum) {
            alert("该批次盘亏,请说明原因");
            $('#dialog-was2').dialog({
                autoOpen: false,
                modal: true,
                width: 400,
                buttons: {
                    提交: function () {
                        alert("提交了");
                        let input = $('input[id="cause2"]').val();
                        let count = finishedProductNum - finishedProductActual;
                        let cause = "盘亏" + count + " 原因: " + input;
                        updateCause();

                        function updateCause() {
                            $.ajax({
                                "url": "finished/updateCause", // 要提交的URL路径
                                "type": "get", // 发送请求的方式
                                "data": {
                                    batchNumber: batchNumber,
                                    finishedProductActual: finishedProductActual,
                                    cause: cause
                                }, // 要发送到服务器的数据，需要将对象转换为JSON字符串
                                "dataType": "text", // 期望接受的数据格式
                                // "contentType": "application/json;charset=utf-8",
                                "success": function (result) { // 请求成功后要执行的代码
                                    if (result == "success") {
                                        // // alert("盘点完成");
                                        $("#t1~tr").remove();
                                        getFinishedProductInfo();
                                    } else {
                                        // alert("盘点未通过");
                                    }
                                },
                                "error": function () {
                                    alert("updateActual响应时间过长！请重新加载");
                                }
                            });
                        }

                        $(this).dialog('close');
                    },
                    返回: function () {
                        $(this).dialog('close');
                    }
                }
            });
            $('#dialog-was2').dialog('open');
        }
    }


</script>
</body>
</html>
